<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>智能对话助手</title>
    <style>
        /* DeepSeek 风格紧凑布局 */
        :root {
            --primary-color: #2d8cf0;
            --bg-color: #f8f9fa;
            --border-color: #e9ecef;
        }

        body {
            margin: 0;
            padding: 16px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: var(--bg-color);
        }

        .chat-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-color);
        }

        .messages-panel {
            height: 60vh;
            overflow-y: auto;
            padding: 16px;
        }

        .message {
            display: flex;
            margin: 12px 0;
            gap: 12px;
        }

        .user-message {
            flex-direction: row-reverse;
        }

        .message-bubble {
            max-width: 70%;
            padding: 8px 12px;
            border-radius: 12px;
            line-height: 1.5;
        }

        .assistant-bubble {
            background: #f1f3f5;
            border: 1px solid var(--border-color);
        }

        .user-bubble {
            background: var(--primary-color);
            color: white;
        }

        .input-area {
            display: flex;
            gap: 8px;
            padding: 16px;
            border-top: 1px solid var(--border-color);
        }

        #user-input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: 20px;
            outline: none;
        }

        #send-btn {
            padding: 8px 16px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 20px;
            cursor: pointer;
        }

        .loading-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            color: #6c757d;
            font-size: 0.9em;
        }

        .dot-flashing {
            animation: dotFlashing 1s infinite linear;
        }

        @keyframes dotFlashing {
            0% { opacity: 0.3; }
            50% { opacity: 1; }
            100% { opacity: 0.3; }
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="header">
            <h3>DeepSeek 智能助手</h3>
            <button onclick="startNewSession()">新对话</button>
        </div>
        
        <div class="messages-panel" id="messages">
            <!-- 消息历史自动填充 -->
        </div>

        <div class="input-area">
            <input 
                type="text" 
                id="user-input" 
                placeholder="输入消息..." 
                onkeydown="handleKeyPress(event)"
            >
            <button id="send-btn" onclick="sendMessage()">发送</button>
        </div>
    </div>

    <script>
        // Session 管理
        let currentSession = {
            id: localStorage.getItem('sessionId') || null,
            history: JSON.parse(localStorage.getItem('chatHistory') || '[]')
        }

        // 初始化时渲染历史记录
        currentSession.history.forEach(msg => appendMessage(msg.content, msg.role))

        // 发送消息逻辑
        async function sendMessage() {
            const input = document.getElementById('user-input')
            const message = input.value.trim()
            if (!message) return
            
            input.value = ''
            appendMessage(message, 'user')
            showLoading()

            try {
                const response = await fetch('http://localhost:8080/api/multi_question', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        input: message,
                        sessionId: currentSession.id
                    })
                })

                const data = await response.json()
                
                // 更新 sessionId
                if (data.sessionId) {
                    currentSession.id = data.sessionId
                    localStorage.setItem('sessionId', data.sessionId)
                }

                // 保存对话历史
                currentSession.history.push(
                    { role: 'user', content: message },
                    { role: 'assistant', content: data.response }
                )
                localStorage.setItem('chatHistory', JSON.stringify(currentSession.history))

                appendMessage(data.response, 'assistant')
            } catch (error) {
                appendMessage(`请求失败: ${error.message}`, 'error')
            } finally {
                hideLoading()
            }
        }

        // 新会话处理
        function startNewSession() {
            currentSession = { id: null, history: [] }
            localStorage.removeItem('sessionId')
            localStorage.removeItem('chatHistory')
            document.getElementById('messages').innerHTML = ''
        }

        // 消息渲染
        function appendMessage(content, role) {
            const messages = document.getElementById('messages')
            const messageDiv = document.createElement('div')
            
            messageDiv.className = `message ${role}-message`
            messageDiv.innerHTML = `
                <div class="message-bubble ${role}-bubble">
                    ${content}
                </div>
            `
            
            messages.appendChild(messageDiv)
            messages.scrollTop = messages.scrollHeight
        }

        // 加载状态
        function showLoading() {
            const loading = document.createElement('div')
            loading.className = 'loading-indicator'
            loading.innerHTML = `
                <span class="dot-flashing">●</span>
                正在思考中...
            `
            document.getElementById('messages').appendChild(loading)
        }

        function hideLoading() {
            document.querySelector('.loading-indicator')?.remove()
        }

        // 回车发送
        function handleKeyPress(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault()
                sendMessage()
            }
        }
    </script>
</body>
</html>